<template>
  <a-desc v-model="descForm" :descOption="descOption">
    <template #AddressForm>
      {{
        "No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province"
      }}
    </template>
  </a-desc>
</template>

<script lang="ts" setup>
import aDesc from "@/components/aDesc";

const descForm = ref({
  username: "kooriookami",
  telephone: "18100000000",
  Place: "Suzhou",
  Remarks: "School",
  Address:
    "No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu ProvinceNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province",
});

const descOption = computed(() => {
  return {
    border: true,
    labelBack: true, // border: true 设置labelBack更改label背景为白色
    // col: 1,
    // direction: 'vertical',
    // labelWidth: 60,
    columns: [
      {
        prop: "username",
        label: "username",
        align: "center",
        labelAlign: "center",
        span: 2,
      },
      {
        prop: "telephone",
        label: "telephone",
        align: "center",
        labelAlign: "center",
      },
      {
        prop: "Place",
        label: "Place",
        align: "center",
        labelAlign: "center",
        span: 2,
      },
      {
        prop: "Remarks",
        label: "Remarks",
        align: "center",
        labelAlign: "center",
      },
      {
        prop: "Address",
        label: "Address",
        align: "left",
        labelAlign: "center",
        span: 3,
        slot: true,
        lineClamp: 2,
      },
    ],
  };
});
</script>

<style>
</style>